<template>
  <div class="data_box">
    <el-row class="boxRow">
      <el-col class="boxMain" :class="isView ? 'not_config' : ''" v-if="dialSet.oneParam == null">
        <div class="data_deploy" v-if="!isView">
          <div class="tab_title configure_title">电压信息</div>
          <el-button type="primary" size="small" @click="setDeploy('oneParam')">配置</el-button>
        </div>
      </el-col>
      <el-col class="boxMain box_one" v-else>
        <div v-if="isView" class="d-flex justify-content-between px-10">
          <div class="tab_title">电压信息</div>
          <!-- <div class="configured" @click="setDeploy('oneParam')">已配置</div> -->
        </div>
        <div class="data_deploy" v-else>
          <div class="tab_title configure_title">电压信息</div>
          <el-button type="primary" size="small" @click="setDeploy('oneParam', info.oneParam)">配置</el-button>
        </div>
        <div class="tab h-100 mt-2">
          <div class="item" v-for="(item, index) in info.oneParam" :key="index">
            <div class="title">{{ item.value }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </el-col>

      <el-col class="boxMain" :class="isView ? 'not_config' : ''" v-if="dialSet.twoParam == null">
        <div class="data_deploy" v-if="!isView">
          <div class="tab_title configure_title">电流信息</div>
          <el-button type="primary" size="small" @click="setDeploy('twoParam')">配置</el-button>
        </div>
      </el-col>
      <el-col class="boxMain box_two" v-else>
        <div v-if="isView" class="d-flex justify-content-between px-10">
          <div class="tab_title">电流信息</div>
          <!-- <div class="configured" @click="setDeploy('twoParam')">已配置</div> -->
        </div>
        <div class="data_deploy" v-else>
          <div class="tab_title configure_title">电流信息</div>
          <el-button type="primary" size="small" @click="setDeploy('twoParam', info.twoParam)">配置</el-button>
        </div>
        <div class="tab h-100 mt-2">
          <div class="item" v-for="(iten, indey) in info.twoParam" :key="indey">
            <div class="title">{{ iten.value }}</div>
            <div class="name">{{ iten.name }}</div>
          </div>
        </div>
      </el-col>
      <el-col class="boxMain" :class="isView ? 'not_config' : ''" v-if="dialSet.threeParam == null">
        <div class="data_deploy" v-if="!isView">
          <div class="tab_title configure_title">功率信息</div>
          <el-button type="primary" size="small" @click="setDeploy('threeParam')">配置</el-button>
        </div>
      </el-col>
      <el-col class="boxMain box_three" v-else>
        <div v-if="isView" class="d-flex justify-content-between px-10">
          <div class="tab_title">功率信息</div>
          <!-- <div class="configured" @click="setDeploy('threeParam')">已配置</div> -->
        </div>
        <div class="data_deploy" v-else>
          <div class="tab_title configure_title">功率信息</div>
          <el-button type="primary" size="small" @click="setDeploy('threeParam', info.threeParam)">配置</el-button>
        </div>
        <div class="chart_tab h-100">
          <div id="device-power" class="my_chart"></div>
          <div class="center" v-if="info.threeParam">
            <div class="tab_title mb-3">当前{{ info.threeParam[0].name }}</div>
            <div class="title">{{ info.threeParam[0].value }}</div>
          </div>
        </div>
      </el-col>
      <el-col class="boxMain" :class="isView ? 'not_config' : ''" v-if="dialSet.fourParam == null">
        <div class="data_deploy" v-if="!isView">
          <div class="tab_title configure_title">温度信息</div>
          <el-button type="primary" size="small" @click="setDeploy('fourParam')">配置</el-button>
        </div>
      </el-col>
      <el-col class="boxMain box_four" v-else>
        <div v-if="isView" class="d-flex justify-content-between px-10">
          <div class="tab_title">温度信息</div>
          <!-- <div class="configured" @click="setDeploy('fourParam')">已配置</div> -->
        </div>
        <div class="data_deploy" v-else>
          <div class="tab_title configure_title">温度信息</div>
          <el-button type="primary" size="small" @click="setDeploy('fourParam', info.fourParam)">配置</el-button>
        </div>
        <div class="chart_tab h-100">
          <div id="device-voltage" class="my_chart"></div>
          <div class="center">
            <div class="tab_title mb-3">当前设备温度</div>
            <div class="title" v-if="info.fourParam">
              {{ info.fourParam[0].value }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="boxMain lastLine" :class="isView ? 'not_config' : ''" v-if="dialSet.fiveParam == null">
        <div class="data_deploy" v-if="!isView">
          <div class="tab_title configure_title">状态信息</div>
          <el-button type="primary" size="small" @click="setDeploy('fiveParam')">配置</el-button>
        </div>
      </el-col>
      <el-col class="boxMain box_five lastLine" v-else>
        <div v-if="isView" class="d-flex justify-content-between px-10">
          <div class="tab_title">状态信息</div>
          <!-- <div class="configured" @click="setDeploy('fiveParam')">已配置</div> -->
        </div>
        <div class="data_deploy" v-else>
          <div class="tab_title configure_title">状态信息</div>
          <el-button type="primary" size="small" @click="setDeploy('fiveParam', info.fiveParam)">配置</el-button>
        </div>
        <div class="chart_tab h-100">
          <div class="w-40 center">
            <img src="../../../../../../assets/img/frame.png" alt="" class="decive_img"/>
            <!-- <img :src="item.devicePic" alt="" class="decive_img" /> -->
          </div>
          <div class="d-flex flex-column justify-content-center w-60">
            <div class="tab_title line_h" v-for="(iteb, indez) in info.fiveParam" :key="indez">{{ iteb.name }}：{{
              iteb.value }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
  </div>
</template>

<script>
  import * as echarts from "echarts"
  import charts from "./chart.js"
  import deployDialog from "./dialog/deployDialog.vue"
  import { queryDeviceRealOnePar } from "@/api/showManage/index"

  export default {
    components: {
      deployDialog
    },
    props: {
      isView: {
        //展示还是配置
        type: Boolean,
        default: () => true
      },
      configured: {
        // 已配置
        type: Array,
        default: () => []
      },
      tableData: {
        // 配置弹窗表格数据
        type: Array,
        default: () => []
      },
      tableData2: {
        // 配置弹窗表格数据
        type: Array,
        default: () => []
      },
      dialSet: {
        //获取数据的配置参数params
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        value: true,
        info: {},
        setNum: "",
        timeInterval: null
      }
    },
    created() {
      this.setTime()
    },
    mounted() {
      this.getData()
      // this.getPower()
    },
    beforeDestroy() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
    methods: {
      setTime() {
        this.timeInterval = setInterval(() => {
          this.getData()
        }, 3000)
      },
      getPower() {
        charts.powerEchart()
        charts.voltageEchart()
      },
      getData() {
        Object.keys(this.dialSet).forEach((key) => {
          if (this.dialSet[key] != null) {
            this.getPar(1, key)
          }
        })
      },
      getPar(type, key, url) {
        let obj = {
          deviceCode: this.$route.query.deviceCode
        }
        obj.params = type == 1 ? this.dialSet[key] : url
        queryDeviceRealOnePar(obj).then((res) => {
          this.$set(this.info, key, res.object)
          if (key == "threeParam") charts.powerEchart(res.object[0].value.slice(0, -1))
          if (key == "fourParam") charts.voltageEchart(res.object[0].value.slice(0, -1))
        })
      },

      setDeploy(par, data = []) {
        this.setNum = par
        this.$refs.deployDialog.setPar = par
        this.$refs.deployDialog.isView = false
        this.$refs.deployDialog.tableData = par == "threeParam" || par == "fourParam" ? this.tableData2 : this.tableData
        if(data) {
          let newList = data.map(item => {
            return item.name
          })
          this.$refs.deployDialog.getList2(newList)
        }
        this.$refs.deployDialog.dialogVisible = true
        console.log(data)
        // console.log(this.$refs.deployDialog.tableData)
      },
      refresh(url) {
        // this.getPar(2, this.setNum, url)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .configure_title {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .box_one {
    background-color: #58a3f7;
  }

  .box_two {
    background-color: #fec03d;
  }

  .box_three {
    background-color: #8167f5;
  }

  .box_four {
    background-color: #52c1f5;
  }

  .box_five {
    background-color: #3dd8ed;
  }

  .data_box {
    height: 17%;
  }

  .boxRow {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .w-40 {
    width: 40%;
  }

  .w-60 {
    width: 60%;
  }

  .boxMain {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    width: calc((100% - 80px) / 5);
    height: 100%;
    border: 1px solid #ebeef5;
    padding: 10px 0;
    position: relative;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
  }

  .lastLine {
    margin-right: 0 !important;
  }

  .my_chart {
    // height: 160px;
    // width: 200px;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 60%;
    height: 100%;
    text-align: center;
  }

  .my_img {
    width: 78%;
    height: 92%;
  }

  .tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .name {
    font-size: 14px;
    color: #fff;
    font-family: "SourceHan";
    font-weight: 400;
    line-height: 21px;
  }

  .title {
    font-size: 24px;
    color: #fff;
    margin-bottom: 12px;
    font-family: "SourceHan";
    font-weight: 500;
    line-height: 29.06px;
  }

  .chart_tab {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .h-100 {
    height: 100%;
  }

  .h-80 {
    height: 80%;
  }

  .tab_title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    font-family: "SourceHan";
    line-height: 21px;
  }

  .text-warning {
    color: #ff9933;
    text-align: center;
    margin-top: 10px;
  }

  .text {
    color: #666666;
  }

  .data_deploy {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
    opacity: 0.9;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .center {
    text-align: center;
  }

  .mt-2 {
    margin-top: 8px;
  }

  .text-switch {
    color: #9075ff;
  }

  .configured {
    font-size: 12px;
    text-align: right;
    // margin-right: 8px;
    // color: #3276ff;
    color: #fff;
    cursor: pointer;
    font-family: "SourceHan";
  }

  .decive_img {
    width: 80%;
    height: 60px;
    object-fit: contain;
    // background-color: #e7e7e7;
    border-radius: 8px;
  }

  .px-10 {
    padding: 0 10px;
  }

  .not_config {
    background-image: url("../../../../../../assets/img/dialDel.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
  }

  .line_h {
    line-height: 32px;
  }
</style>
